import React ,{Component} from 'react'
import BackgroundImg from '../../static/bubble.png';
import {Row,Col} from 'antd';
import { pxToRem, pxToPx,transformUnit } from '../../utils/adaptive.js';


export default class Bubble extends Component{
    static defaultProps = {
      label: '累计利润贡献',
      value: '2018/09/10',
      title: '大连大学附属新华医院',
      showTitle:false,
      scale:1,//缩放大小
    }
    constructor(props) {
        super(props);
    
        this.state = {};
        //页面单位
        this.unit = window.om.unit;
        this.viewWidth = window.om.viewWidth ;
        this.viewHeight = window.om.viewHeight ;
    }

    getContainerStyle(){
        return {
            width:this.transformUnit("5.7vw"),
            height:this.transformUnit("13.6vh"),
            background: `url(${BackgroundImg}) no-repeat`,
            backgroundSize: "100% 100%",  
            display:'flex',
            flexDirection: "column",  
        }
    }
    
    getValueStyle(){
        return {
            position:'relative',
            fontSize: this.transformUnit("2.6vh") ,
            fontSize: pxToRem(23) ,
            lineHeight: this.transformUnit("3.6vh") ,
            fontFamily: 'PingFangSC-Semibold',
            color: '#FFB000',
            textAlign: 'center',
            bottom:"10px",
            // flexGrow: "1",
        }
    }
    getLabelStyle(){
        return {
            fontSize: pxToRem(18) ,
            // fontSize: '10px' ,
            lineHeight: this.transformUnit("1vh") ,
            fontFamily: 'PingFangSC-Semibold',
            color: '#ADF6FF',
            textAlign: 'center',
            flexGrow: "1.5",
        }
    }
    getTitleStyle(){
        return {
            fontSize: pxToRem(10),
            // fontSize: '10px' ,
            lineHeight: this.transformUnit("1.2vh") ,
            fontFamily: 'PingFangSC-Semibold',
            color: '#B6DBFB',
            textAlign: 'center',
        }
    }

    transformUnit(data) {
        if (this.unit == "px") {//固定大小的设计
            if (data.indexOf("vh") != -1) {
                return parseFloat(data) * this.viewHeight + "px";
            } else if (data.indexOf("vw") != -1) {
                return parseFloat(data) * this.viewWidth + "px";
            } else {
                return data;
            }
        } else {//自适应的设计
            return data;
        }
    }


    render(){
        let width = 5.7 * window.om.viewWidth ;
        let height = 15 * window.om.viewHeight ;
        let min = Math.min(width,height)+"px";
        return (
                <div style={{width:this.transformUnit("5.7vw"),height:this.transformUnit("15vh"),transform: `scale(${this.props.scale})`,transformOrigin: '0 0'}} >
                {/*<div style={{width:min,height:min,transform: `scale(${this.props.scale})`,transformOrigin: '0 0'}}>*/}

            {

            // <div style={{width:this.transformUnit("5.7vw"),height:this.transformUnit("15vh"),zoom: `${this.props.scale}`}}>
                    // <div style={this.getValueStyle()}>{this.props.value+" | "+this.props.scale}</div>
            }
                <div style={this.getContainerStyle()}>
                    <div style={{flexGrow: "2"}} />
                    <div style={this.getValueStyle()}>{String(this.props.value).indexOf(".")!=-1?Math.round(this.props.value):this.props.value}</div>
                    <div style={this.getLabelStyle()}>{this.props.label}</div>
                </div>
                {
                    this.props.showTitle?<div style={this.getTitleStyle()}>{this.props.title}</div>:null
                }
                
            </div>
        )
    }
}